import Taro, { FC } from '@tarojs/taro'
import React, { useState } from 'react'
import { View } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import './index.scss'

const ReleaseBtn: FC = () => {
  const [isOpened, setisOpened] = useState<boolean>(false)
  const releaseBtnitems = [
    {
      titie: '发布物品',
      routerUrl: '/pages/ItemSharing/ReleaseItems/index',
      id: 1
    },
    {
      titie: '发布技能',
      routerUrl: '',
      id: 2
    },
    {
      titie: '发布活动',
      routerUrl: '',
      id: 3
    },
    {
      titie: '发布问题',
      routerUrl: '',
      id: 4
    },
    {
      titie: '现场办理',
      routerUrl: '',
      id: 5
    }
  ]
  return (
    <View className='releaseBtn'>
      {/* 发布物品遮罩 */}
      {isOpened && (
        <View
          className='releaseBtn-curtain'
          onClick={() => {
            setisOpened(false)
          }}
        >
          <View className='releaseBtn-items'>
            {releaseBtnitems.map((item) => {
              return (
                <View
                  key={item.id}
                  className='releaseList'
                  onClick={() => {
                    Taro.navigateTo({ url: item.routerUrl })
                  }}
                >
                  <View className='releaseList-titie'>{item.titie}</View>
                  <View className='releaseList-icon'>
                    <AtIcon prefixClass='icon' value='jia' size='15' color='#fff'></AtIcon>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      )}
      {/* 显示发布列表按钮 */}
      <View
        className='releaseBtn-select'
        onClick={() => {
          setisOpened(true)
        }}
      >
        <View className='releaseBtn-select--inner'>
          <AtIcon prefixClass='icon' value='jia' size='18' color='#fff'></AtIcon>
        </View>
      </View>
    </View>
  )
}

export default ReleaseBtn
